import ApiModelList from './components/ApiModelList/index.vue';
import ApiModelAdd from './components/ApiModelAdd/index.vue';
import { ref } from 'vue';
import { MciButton, MciDialog } from '@/components/base';

export default defineComponent({
  setup(props, context) {
    const showAdd = ref(false);
    const title = ref('新增模型API');
    let rowData : any= null;
    const activeStep = ref(0);
    const executeDone = ref(false);

    const handleEdit = (row?: any) => {
      showAdd.value = true;
      rowData = row;
      if ( rowData && rowData.id) {
        title.value = '修改模型API';
      } else {
        title.value = '新增模型API';
      }
    };

    const init = () => {
      activeStep.value = 0;
      if (dataModelAddRef.value) {
        dataModelAddRef.value && dataModelAddRef.value?.initData(rowData);
      }
    };

    const lastStep = () => {
      dataModelAddRef.value && dataModelAddRef.value?.last();
    };

    const nextStep = () => {
      dataModelAddRef.value && dataModelAddRef.value?.save();
    };

    const handleClosed = (refresh?: boolean) => {
      showAdd.value = false;
      refresh && dataModelListRef.value && dataModelListRef.value?.tableRequest();
    };
    const handleConfirm = () => {
      dataModelAddRef.value && dataModelAddRef.value?.handleConfirm();
    };
    const dataModelListRef = ref();
    const dataModelAddRef = ref();
    context.expose({ handleEdit });
    return () => {
      return (
        <div>
          <ApiModelList onEdit={handleEdit} ref={dataModelListRef} />
          {/* <ApiModelAdd ref={dataModelAddRef} onClosed={handleClosed} /> */}
          {showAdd.value && (
            <>
              <MciDialog
                title={title.value}
                v-model={showAdd.value}
                width={1000}
                draggable={true}
                customClass="max-height-dialog">
                {{
                  default() {
                    return <ApiModelAdd ref={dataModelAddRef} onInit={init} onActiveStep={(step) => (activeStep.value = step)} onExecute={(execute) => (executeDone.value = execute)} onClosed={(refresh)=>handleClosed(refresh)} />;
                  },
                  footer() {
                    return (
                      <>
                        <MciButton onClick={() => (showAdd.value = false)}>取消</MciButton>
                        {activeStep.value > 0 && <MciButton onClick={lastStep}> 上一步 </MciButton>}
                        {activeStep.value === 0 && <MciButton type="primary" onClick={nextStep}> 下一步 </MciButton>}
                        {activeStep.value > 0 && <MciButton type="primary" disabled={!executeDone.value} onClick={handleConfirm}>
                          确定
                        </MciButton>}
                      </>
                    );
                  }
                }}
              </MciDialog>
            </>
          )}
        </div>
      );
    };
  }
});
